﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <TITLE>拾联flash播放器插件示例(带回放功能)</TITLE>
    <style type="text/css">
        table tr td{margin:0px;padding:0;}
        a.startCss {
            display: block;
            font-size: 14px;
            font-family: 微软雅黑;
            color: white;
            width: 72px;
            height: 30px;
            line-height: 30px;
            background-repeat: no-repeat;
            cursor: pointer;
            margin-top: 40px;
            font-size: 14px;
            margin-left: auto;
            margin-right: auto;
        }
        a.BtnCss {
            display: block;
            font-size: 14px;
            font-family: 微软雅黑;
            color: white;
            width: 72px;
            height: 30px;
            line-height: 30px;
            background-repeat: no-repeat;
            cursor: pointer;
            font-size: 14px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom:4px;
        }
        a.startCssTest {
            display: block;
            font-size: 14px;
            font-family: 微软雅黑;
            color: white;
            width: 72px;
            height: 30px;
            line-height: 30px;
            background-repeat: no-repeat;
            cursor: pointer;
            margin-top: 40px;
            font-size: 14px;
            margin-left: auto;
            margin-right: auto;
        }
        div.centerShowDivCss {
            display:block;
            background-color:gray;
            width:200px;
            height:80px;
            position:absolute;
            vertical-align: middle;
        }
        div.cloudFontCss {
            text-align:center;
            display:block;
            width:200px;
            margin-top:-4px;
            height:60px;line-height:60px;vertical-align:middle;
            font-size:18px;
            color:white;
            font-family:微软雅黑;
            z-index: 0;
        }
        div.cloudDivCss {
            background-color: #242424;
            height: 520px;
            width: 180px;
            display: inline-block;
            text-align: center;
        }
        img.bgImgCss {
            width:142px;
            height:143px;
        }
        div.bgDivCss {
            width:200px;
            height:143px;
            display:block;
            position: relative;
            z-index: 0;
            text-align: auto;
            margin-top: -136px;
        }
        #stdout {
            width:640px;
            height: 240px;
            background-color: black;
            color: white;
            overflow-x: hidden;
            overflow-y: scroll;
        }
    </style>
    <script type="text/javascript" src="js/swfobject.js"></script>
</head>
<body onload="onStartMet()">
<div style="width: 100%; text-align: center;">
    <div style="margin-left: auto; margin-right: auto; width: 1280px; height: 720px; background-color: 0x000000; text-align: center;">
        <script type="text/javascript">
	    function onStartMet() {
		    //这里还要添加flash
			var flashvars = {
				 playerID: '8'
				 //下面的五个参数，如果有传的话，页面是直接打开画面的，但是要传的对
			};
			var params = {
				allowScriptAccess: 'always',
				allowFullscreen: "true",
				scale: "exactFit"   //填充模式，以后大小由网页来调整
			};
			var attributes = { id: 'player', name: 'player' };
			var divObj = document.getElementById("main_video");
			var wVideo = divObj.style.width;
			var hVideo = divObj.style.height;
			swfobject.embedSWF('./SLPlayer.swf?ver='+Math.random(), 'main_video', wVideo, hVideo, '9.0.0', './SLPlayer.swf', flashvars, params, attributes);
		}

        var serverIP = '101.132.152.150';
        var serverPort = 39100;
        var appID = 'wholeally';
        var authToken = 'czFYScb5pAu+Ze7rXhGh/8r+Iwwc6yYxykybiYXfmlUG5hUR8MkXH/MBaOy+I6hqSFLfYeF/Q/MMtbInuqPM/FLDCW7Pg3w7';
        var channelID = '1000005559001';
        var t_zone = 8;
        var year = 2018;
        var month = 7;
        var day = 31;
        var hour = 0;
        var minute = 0;
        var second = 0;
		var player;

/**************************************************************下面是flash会调用js脚本的所有方法***********************************************************************/
		/**
		*flash播放器内部初始化完就会调用这个js接口
		*/
		function onIniOk(){         //初始化播放器结束，如果有本方法，播放会在初始化结束之后调用这里的js方法
			<!--player = swfobject.getObjectById('player');-->
			<!--player.setDebugVisible(true);-->
			<!--player.SetServer(serverIP, serverPort);-->
			<!--player.ViewerLogin(appID, authToken);-->
			console.log("onIniOk: 播放器初始化......");
		}

		/**
		*flash播放器在连接平台之后每次的服务变化都会调用这里,例如：第一次登录成功，会调用这里，以后断开、重连成功都会调用这里
		*/		
		function onServiceChange(jsonParam){
			var param = JSON.parse(jsonParam);
			console.log("onServiceChange: 平台服务变化：" + jsonParam);
		}

		function onViewBackResult(jsonParam){       //申请回放结果，如果中间连接断开是会调用其他js方法（比如回放转发断开）
			player = swfobject.getObjectById('player');
			var param = JSON.parse(jsonParam);
			console.log("onViewBackResult: 申请回放返回结果：" + jsonParam);
		}

		function onLoginFail(jsonParam){
			var param = JSON.parse(jsonParam);
			console.log("onLoginFail: 登录平台失败: " + jsonParam);
		}

		function onViewFail(jsonParam){
			var param = JSON.parse(jsonParam);
			console.log("onViewFail: 观看设备失败: " + jsonParam);
		}

		function onViewClose(jsonParam){
			var param = JSON.parse(jsonParam);
			console.log("onViewClose: 观看会话关闭: " + jsonParam);
		}

		function onViewShow(jsonParam){
			var param = JSON.parse(jsonParam);
			console.log("onViewShow: 画面即将出来，可以隐藏连接动画了: " + jsonParam);
		}

		function onAutoReView(jsonParam){
			var param = JSON.parse(jsonParam);
			console.log("onAutoReView: 正在自动重连观看中，可以显示连接动画了: " + jsonParam);
		}

		function onViewBackFail(jsonParam){
			var param = JSON.parse(jsonParam);
			console.log("onViewBackFail: 回放录像失败: " + jsonParam);
		}

		function onViewBackClose(jsonParam){
			var param = JSON.parse(jsonParam);
			console.log("onViewBackClose: 回放会话关闭: " + jsonParam);
		}

		function onQueryDayIndexResult(jsonParam){
			var param = JSON.parse(jsonParam);
			console.log("onQueryDayIndexResult: 查询天索引内容：" + jsonParam);
		}

		function onQuery24HIndexResult(jsonParam){
			var param = JSON.parse(jsonParam);
			console.log("onQuery24HIndexResult: 查询24小时索引内容：" + jsonParam);
		}

		function onPlayCtrlResult(jsonParam){
			var param = JSON.parse(jsonParam);
			console.log("onPlayCtrlResult: 播放控制结果：" + jsonParam);
		}

/**************************************下面是flash提供js脚本调用的所有方法示例（跟按钮上的方法是一对一的）**********************************************/
		/**
		 * 设定重连次数
		 * @param	count   -1为不重连（小于0）， 0为无限次， 大于0就是指定次数
		 */
		function setReConnectCount(count) {      //获取本播放器的id
			player = swfobject.getObjectById('player');
			player.setReConnectCount(count);
		}

		function setID(playerID) {           //获取本播放器的id
			playerID = playerID +　Math.random() * 10;       //给个随机id
			player = swfobject.getObjectById('player');
			player.setID(playerID);
		}

		function getID() {           //设定本播放的播放器id，当一界面多个plyer的比较好解决
			player = swfobject.getObjectById('player');
			var id =  player.getID();
			console.log("getID: 获取播放器ID："+id);
		}

		/**
		*设定平台地址
		*/
		function SetServer(ip,port) {
			player = swfobject.getObjectById('player');
			player.SetServer(ip, port);
		}

		/**
		*观看端登录平台
		*/
		function ViewerLogin(appID,userAuth) {
			player = swfobject.getObjectById('player');
			player.ViewerLogin(appID, userAuth);			
		}

		/**
		*开始观看设备
		*/
		function StartView(chnID) {
			player = swfobject.getObjectById('player');
			player.StartView(chnID);			
		}

		/**
		*停止观看设备
		*/
		function StopView() {
			player = swfobject.getObjectById('player');
			player.StopView();			
		}

		/**
		*云台操作
		* type  操作类型：
		* ctrlCmd  操作指令
		*/
		function CtrlPtz(type,ctrlCmd) {
			player = swfobject.getObjectById('player');
			player.CtrlPtz(type,ctrlCmd);			
		}

		/**
		*设定播放器缓存时间（单位秒）
		*/
		function SetBufferTime(bufferTime) {
			player = swfobject.getObjectById('player');
			player.SetBufferTime(bufferTime);			
		}

		/**
		 * 开始录像回放
		 * @param   chnID
		 * @param   cloud    是否从云存中取  0:从设备端读取,1:从云存读取	
		 */
		function StartViewBack(chnID, cloud) {
			player = swfobject.getObjectById('player');
			player.StartViewBack(chnID, cloud);
		}

		/**
		*停止录像回放
		*/
		function StopViewBack() {
			player = swfobject.getObjectById('player');
			player.StopViewBack();			
		}

		/**
		 * 查询指定子设备的天概要索引
		 * @param	chnID   子设备号
		 * @param	year    年
	 	 * @param	month   月
	 	 * @param	t_zone  时区
	 	 * @param	cloud   是否从云存中取  0:从设备端读取,1:从云存读取	
		 */
		function QueryDayIndex(chnID, year, month, t_zone, cloud) {
			player = swfobject.getObjectById('player');
			player.QueryDayIndex(chnID, year, month, t_zone, cloud);
		}

		/**
		 * 查询24小时索引文件信息
		 * @param	chnID  子设备id
		 * @param	year   年
	 	 * @param	month  月
		 * @param	day    日
	 	 * @param	hour   小时
	 	 * @param	minute  分钟
		 * @param	sec     秒
		 */
		function Query24HIndex(chnID, year, month, day, hour, minute, sec) {
			player = swfobject.getObjectById('player');
			player.Query24HIndex(chnID, year, month, day, hour, minute, sec);
		}

		/**
		 * 回放控制：
		 * @param	year    年
		 * @param	month   月
		 * @param	day     日 
		 * @param	hour    小时
		 * @param	min     分钟
		 * @param	sec     秒
		 * @param	playType    1播放; 2暂停; 3继续; 0停止;
		 */
		function PlayBackCtrl(year, month, day, hour, min, sec, playType) {
			player = swfobject.getObjectById('player');
			player.PlayBackCtrl(year, month, day, hour, min, sec, playType);			
		}

		/**
		*显示关闭调试面板
		*/
		function setDebugVisible(flag) {
			player = swfobject.getObjectById('player');
			player.setDebugVisible(flag);			
		}
    </script>
        <table style="margin:0px;padding:0px;border:none;">
            <tr>
                默认连接平台、登录平台，测试录像回放，先按申请回放，成功之后才可以查24小时索引，和播放控制，查天索引可以随时查，无需申请回放
                统一错误号注明：100为平台服务断开， 101是转发服务断开
            </tr>
            <tr>
                <td>
                    <div id="main_video" style="margin-left: 0px;margin-top:0px; width: 854px; height: 480px; display: inline-block;"></div>
                </td>
                <td>
                    <div class="cloudDivCss">
                        <div class="cloudFontCss">常用操作</div><br/>
                        <div style="text-align:center;width:100%;">
                            <table>
                                <tr>
                                    <td align="center">
                                        <a class="BtnCss" onmousedown="SetServer(serverIP, serverPort)">连接平台</a>
                                        <a class="BtnCss" onmousedown="ViewerLogin(appID, authToken)">登录平台</a>
                                        <a class="BtnCss" onmousedown="StartView(channelID)">观看设备</a>
                                        <a class="BtnCss" onmousedown="StopView()">停止观看</a>
                                        <a class="BtnCss" onmousedown="SetBufferTime(1.5)">设定缓存</a>
                                        <a class="BtnCss" onmousedown="setID(7)">设定id</a>
                                        <a class="BtnCss" onmousedown="getID()">获取id</a>
                                        <a class="BtnCss" onmousedown="setReConnectCount(0)">设定重连</a>
                                    </td>
                                    <td align="center">
                                        <a class="BtnCss" onmousedown="setDebugVisible(true)">显示调试</a>
                                        <a class="BtnCss" onmousedown="setDebugVisible(false)">关闭调试</a>
                                        <a class="BtnCss" onmousedown="StartViewBack(channelID, 0)">申请回放</a>
                                        <a class="BtnCss" onmousedown="QueryDayIndex(channelID, year, month, t_zone, 0)">查天索引</a>
                                        <a class="BtnCss" onmousedown="Query24HIndex(channelID, year, month, day, 0, 0, 0)">小时索引</a>
                                        <a class="BtnCss" onmousedown="PlayBackCtrl(year, month, day, hour, minute, second, 1)">播放录像</a>
                                        <a class="BtnCss" onmousedown="PlayBackCtrl(0, 0, 0, 0, 0, 0, 2)">暂停录像</a>
                                        <a class="BtnCss" onmousedown="PlayBackCtrl(0, 0, 0, 0, 0, 0, 3)">继续录像</a>
                                        <a class="BtnCss" onmousedown="StopViewBack()">停止回放</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="cloudDivCss">
                        <div class="cloudFontCss">云台操作</div><br/>
                        <div style="text-align:center;width:100%;">
                            <table>
                                <tr>
                                    <td align="center">
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,6)">云台向上</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,8)">云台向左</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,9)">云台向右</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,7)">云台向下</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,0)">变倍放大</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,1)">变倍缩小</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,4)">焦距拉近</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,5)">焦距拉远</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,2)">光圈放大</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,3)">光圈缩小</a>
                                    </td>
                                    <td align="center">
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,14)">停止操作</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,14)">停止操作</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,14)">停止操作</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,14)">停止操作</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,14)">停止操作</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,14)">停止操作</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,14)">停止操作</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,14)">停止操作</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,14)">停止操作</a>
                                        <a class="BtnCss" onmousedown="CtrlPtz(0,14)">停止操作</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>
